<template>
	<view class="content">
		<scroll-view scroll-y="true" class="scroll_h">
			<view class="right_card" v-for="v in 10" @click="goHotDoc">
				<view class="avatar">
					<u-avatar :src="docSrc" size="36" shape="circle" :default-url="log_pic"></u-avatar>
				</view>
				<view class="right_list">
					<view class="name">许雅涵 <span class="position">主任医师</span></view>
					<view class="count">
						<view class="start">
							<u--image :showLoading="true" :src="startNum" width="14px" height="10px"></u--image>
						</view>
						<view class="socres">9.5分</view>
						<view class="dep">皮肤一门诊</view>
					</view>
					<view class="orange">
						<view class="num">
							河南百佳名医 NO.1
						</view>
					</view>
					<view class="brand">
						<view class="tips">
							挂号
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "hosp-details-hot-doc",
		data() {
			return {
				startNum: require('@/static/icons/star_num.png'),
				log_pic: require('@/static/icons/yimo.png'),
				emptyList: require('@/static/icons/empty_list.png'), //空列表
				docSrc:''
			};
		},
		methods:{
			goHotDoc(){
				uni.navigateTo({
					url:'/pages/docinfo/docinfo'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		//padding-bottom: 100rpx;
		.scroll_h {
			height: 920rpx;
		}

		.right_card {
			//width: 226px;
			//height: 89px;
			padding: 12rpx 0 20rpx 20rpx;
			display: flex;
			//align-items: center;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.avatar {}

			.right_list {
				display: flex;
				flex-direction: column;
				padding-left: 10rpx;

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #3D3D3D;
					line-height: 34rpx;
				}

				.position {
					padding-left: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #3D3D3D;
					line-height: 28rpx;
				}

				.count {
					display: flex;
					font-size: 20rpx;
					font-weight: 400;
					margin: 8rpx 0;
					line-height: 24rpx;
					align-items: center;

					.start {}

					.socres {
						flex-shrink: 0;
						padding: 0 8rpx 0 8rpx;
						color: #EB7637;
					}

					.dep {
						color: #3D3D3D;
					}
				}
			}

			.orange {
				display: flex;
				.num{
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #FFA358;
					font-size: 20rpx;
					font-weight: 400;
					color: #E08337;
					line-height: 24rpx;
					padding: 4rpx 8rpx;
				}
				
			}

			.brand {
				display: flex;

				.tips {
					margin-top: 12rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #0F91F7;
					line-height: 24rpx;
					background: #EFF7FF;
					padding: 8rpx 12rpx;
					border-radius: 10rpx;
				}

				//display: inline-block;
				//width: 100%;
			}
		}
	}
</style>